<template>
  <view class="songList_header" v-if="playlistDetail.coverImgUrl">
    <image class="filter" :src="playlistDetail.coverImgUrl"></image>
    <view class="header_top">
      <view class="header_context">
        <!-- 图片 -->
        <view class="header_image" :style="`background-image: url(${playlistDetail.coverImgUrl})`">
          <text class="header_image_icon">{{ convertToWan(playlistDetail.playCount) }}</text>
        </view>
        <!-- 内容 -->
        <view class="header_text">
          <view class="header_text_title">
            {{ playlistDetail.name }}
          </view>
          <!-- 创建者信息 -->
          <view class="header_text_user">
            <image class="header_text_user_image" :src="playlistDetail.creator.avatarUrl"></image>
            <text class="header_text_user_username">{{ playlistDetail.creator.nickname }}</text>
            <view class="header_text_user_attention">
              <text class="header_text_user_attention_icon">+</text> 关注
            </view>
          </view>
          <!-- 标签 -->
          <view class="header_text_tags">
            <view v-for="(item,index) in playlistDetail.algTags" :key="index" class="tag">
              <text style="margin-right: 10rpx;">{{item }}</text>
              <u-icon name="arrow-right" size="10"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="header_center">
      <view class="header_center_text" v-if="playlistDetail.description">
        {{playlistDetail.description }}
      </view>
      <view class="header_center_text" v-else>
        介绍：无
      </view>
      <u-icon name="arrow-right" size="18"></u-icon>
    </view>
    <view class="header_bottom">
      <!-- 分享 -->
      <view class="header_share">
        <text class="iconfont icon-icon-test"></text>
        <text>{{ playlistDetail.shareCount }}</text>
      </view>
      <!-- 评论 -->
      <view class="header_comment" @click="show = true">
        <text class="iconfont icon-pinglun"></text>
        <text>{{ playlistDetail.commentCount }}</text>
      </view>
      <!-- 收藏 -->
      <view class="header_collect">
        <text class="iconfont icon-icon-6"></text>
        <text>{{ convertToWan(playlistDetail.subscribedCount) }}</text>
      </view>
    </view>
  </view>

  <u-popup :show="show" mode="bottom"  @close="close" @open="open" closeable>
    <commont @scrolltolower="scrolltolower"></commont>
  </u-popup>
</template>

<script setup>
  import {
    convertToWan
  } from '@/util/convertToWan.js'
  import {
    storeToRefs
  } from 'pinia'
  import {
    useMusicStore
  } from '@/store/modules/musicStore.js'
  const musicStore = useMusicStore()
  const {
    playlistDetail
  } = storeToRefs(musicStore)
  
  import commont from '../commont/commont.vue'
  import { ref } from 'vue'
  const show = ref(false)
  const close = () => {
    console.log('关闭了');
    show.value = false
  }
  const open = () => {
    console.log('打开了');
  }
  const emit = defineEmits(['scrolltolower'])
  const scrolltolower = () => {
    emit('scrolltolower')
  }
</script>

<style lang="scss" scoped>
  .songList_header {
    height: 400rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .filter {
      height: 400rpx;
      width: 100%;
      position: absolute;
      z-index: -1;
      filter: blur(30px);
    }

    .header_top {
      .header_context {
        display: flex;

        .header_image {
          display: flex;
          position: relative;
          background-repeat: no-repeat;
          background-size: cover;
          width: 240rpx;
          height: 240rpx;
          border-radius: 20rpx;

          .header_image_icon {
            position: absolute;
            font-weight: bold;
            color: #fff;
            top: 10rpx;
            right: 10rpx;
          }
        }

        .header_text {
          display: flex;
          flex-direction: column;
          margin-left: 20rpx;
          justify-content: space-between;

          .header_text_title {
            color: #fff;
          }

          .header_text_user {
            display: flex;
            align-items: center;

            .header_text_user_image {
              width: 60rpx;
              height: 60rpx;
              border-radius: 90px;
              margin-right: 10rpx;
            }

            .header_text_user_username {
              font-size: 18rpx;
              color: rgba(255, 255, 255, 0.5);
            }

            .header_text_user_attention {
              background-color: rgba(255, 255, 255, 0.3);
              font-size: 20rpx;
              margin-left: 20rpx;
              width: 100rpx;
              height: 40rpx;
              line-height: 40rpx;
              text-align: center;
              border-radius: 90rpx;
              color: #fff;

              .header_text_user_attention_icon {
                font-size: 30rpx;
              }
            }
          }
        }

        .header_text_tags {
          display: flex;

          .tag {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20rpx;
            font-size: 20rpx;
            color: #fff;
            border-radius: 10rpx;
            padding: 5rpx 10rpx;
            background-color: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }

    .header_center {
      width: 100%;
      height: 50rpx;
      display: flex;
      align-items: center;
      font-size: 20rpx;
      color: #fff;
      opacity: 0.7;

      .header_center_text {
        white-space: nowrap;
        overflow: hidden;
        margin-right: 10rpx;
      }
    }

    .header_bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;

      view {
        cursor: pointer;
        width: 200rpx;
        height: 80rpx;
        border-radius: 90px;
        background-color: rgba(255, 255, 255, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        color: #fff;
        font-weight: bold;

        text {
          margin-right: 5rpx;
        }
      }

      .header_collect {
        background-color: #ff0000;
      }
    }
  }
</style>